<template>
    <view class="pages">
        <video id="myVideo" v-if="src" :src="src" controls></video>
        <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas>
        <view class="btns">
            <button @click="captureFrame">生成Base64</button>
            <button @click="pickVideo">选择视频</button>
        </view>
        <image :src="img" v-if="img"></image>
    </view>
</template>

<script>
export default {
    data: () => ({
        src: '',
        img: '',
    }),
    methods: {
        async pickVideo() {
            uni.chooseVideo({
                sourceType: ['album', 'camera'],
                compressed: false,
                maxDuration: 60,
                success: (res) => {
                    console.log("res", res)
                    this.src = res.tempFilePath;
                }
            });
			// console.log("res", res)
            // if (err) throw err;
            // this.src = res.tempFilePath;
        },
        captureFrame() {
            // const videoContext = uni.createVideoContext('myVideo', this);
			const videoContext = uni.createVideoContext('myVideo')
			console.log("videoContext", videoContext)
            videoContext.snapshot({
                success: (res) => {
                    // this.drawImageToCanvas(res.tempImagePath);
                    console.log('截图成功:', res.tempImagePath);
                    this.img = res.tempImagePath;
                },
                fail: (err) => {
                    console.error('截图失败:', err);
                }
            });
        },
        drawImageToCanvas(tempFilePath) {
            const ctx = uni.createCanvasContext('myCanvas', this);
            ctx.clearRect(0, 0, 300, 200);
            ctx.drawImage(tempFilePath, 0, 0, 300, 200);
            ctx.draw(false, () => {
                this.canvasToBase64();
            });
        },
        canvasToBase64() {
            uni.canvasToTempFilePath({
                canvasId: 'myCanvas',
                fileType: 'png',
                quality: 1,
                success: (res) => {
                    const fs = uni.getFileSystemManager();
                    fs.readFile({
                        filePath: res.tempFilePath,
                        encoding: 'base64',
                        success: (res) => {
                            const base64Data = `data:image/png;base64,${res.data}`;
                            console.log('Base64数据:', base64Data);
                        },
                        fail: (err) => {
                            console.error('读取文件失败:', err);
                        }
                    });
                },
                fail: (error) => {
                    console.error('生成临时路径失败:', error);
                }
            }, this);
        }
    }
}
</script>


<style scoped>
.pages {
    padding: 20rpx;
}
video{
    width: 100%;
}
.btns {
    margin: 40rpx 0;
    display: flex;
    justify-content: center;
    gap: 20rpx;
}

.btns button {
    border: none;
    border-radius: 4px;
    background-color: #007aff;
    color: #fff;
    cursor: pointer;
    flex: 1;
}
</style>